<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<h1>根组件</h1>
			<hr>
			<h2>第二级组件</h2>
			<custom1 @event123="handle1" :title='title'></custom1>
		</div>
		<script type="text/x-template" id="custom1">
			<div>
				<button>改变title</button>
				<h2>{{title}}</h2>
				<h3>第三级组件</h3>
				<custom2 @event='handle2' :title="title"></custom2>
			</div>
		</script>
		<script type="text/x-template" id="custom2">
			<div>
				<button @click="handle3">改变title</button>
				<h2>{{title}}</h2>
			</div>
		</script>

		<script>
			/*
				父组件 -> 子组件 通信 使用props传参
					子组件不能修改props传入的参数
				子组件 -> 父组件 通信 使用自定义事件 订阅/发布模式
					在子组件中，可以发布一个事件
						this.$emit(自定义事件名,[参数])
					父组件关心子组件的状态改变，可以监听这个事件
						在自定义的标签行间写上 @自定义事件名='方法'
			*/
			Vue.component('custom1',{
				props:['title'],
				template: '#custom1',
				methods: {
					handle2 () {
						//this.$emit('event123')
					}
				}
			});
			Vue.component('custom2',{
				props:['title'],
				template: '#custom2',
				methods: {
					handle3 () {
						this.$emit('event')
					}
				}
			});


			

			// 未挂载
			let vm = new Vue({
				el:'#app',
				data: {
					message:'hello',
					title: 'hello，传入到第三层'
				},
				methods: {
					handle1 (params) {
						console.log('我监听到了')
					}
				}
			});

		</script>
	</body>
</html>